<template>
  <div class="app-container">
    <el-row>
      <el-col :span="2">
        <!--        <el-avatar src="/static/img/profile.473f5971.jpg"></el-avatar>-->
        <!--        <image-preview src="/static/img/profile.473f5971.jpg" ></image-preview>-->
        <el-image src="/static/img/profile.473f5971.jpg" style="width: 100px; height: 100px" fit="contain"
                  :preview-src-list="['/static/img/profile.473f5971.jpg']"
        ></el-image>
      </el-col>
      <el-col :span="22">
        <el-descriptions class="margin-top" :column="2">
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            {{formData.realName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{formData.phoneNumber}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-custom"></i>
              性别
            </template>
            {{formData.sex==1?'女':'男'}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-time"></i>
              年龄
            </template>
            {{calculateAge(formData.birthDate)}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              居住地
            </template>
            {{formData.address}}
          </el-descriptions-item>
<!--          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              备注
            </template>
            <el-tag size="small">学校</el-tag>
          </el-descriptions-item>-->

        </el-descriptions>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row class="app-row" :gutter="20">
      <el-col :span="6" class="card-col">
        <el-card class="card">
          <div class="section-title">绑定家人列表</div>
          <el-table
            :data="formData.customerBindList"
            style="width: 100%"
          >
            <el-table-column
              prop="realName"
              label="姓名"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="phoneNumber"
              label="手机号码"
              width="180"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="18" class="card-col">
        <el-card class="card">
          <div class="section-title">绑定设备列表</div>
          <el-table
            :data="formData.customerDeviceBindList"
            style="width: 100%"
          >
            <el-table-column label="设备编号" align="center" prop="deviceNo"/>
            <el-table-column label="设备名称" align="center" prop="name"/>
            <el-table-column label="设备类型" align="center" prop="type">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.device_type" :value="scope.row.type"/>
              </template>
            </el-table-column>
            <el-table-column label="设备状态" align="center" prop="situation">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.device_situation" :value="scope.row.situation"/>
              </template>
            </el-table-column>
            <el-table-column label="绑定时间" align="center" prop="bindTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.bindTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-divider>绑定站点</el-divider>

  </div>
</template>
<script>
import { getPersonalInfo } from '@/api/customer/management'

export default {
  name: 'PersonalFile',
  dicts: ['device_type', 'device_situation'],
  data(){
    return {
      formData:{
        customerBindList:[{}],
        customerDeviceBindList:[{}]
      }
    }
  },
  created() {
    const customerId = this.$route.params && this.$route.params.customerId
    this.getInfo(customerId)
  },
  methods: {
    getInfo(customerId) {
      getPersonalInfo(customerId).then(res => {
        this.formData=res.data
      })
    },
    calculateAge(birthDate) {
      const today = new Date()
      const birth = new Date(birthDate)
      let age = today.getFullYear() - birth.getFullYear()
      const monthDifference = today.getMonth() - birth.getMonth()
      if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birth.getDate())) {
        age--
      }
      return age
    }
  },
  computed: {}
}
</script>
<style scoped lang="scss">
.section-title {
  font-size: 23px;
  text-transform: uppercase;
  color: #50784b;
}
</style>
